let box;
class Tab {
    constructor(id) {
        // box = this
        this.max = document.querySelector(id);//总体实例化
        this.add = this.max.querySelector('.tabadd')//添加的实例化
        // console.log(box);
        // console.log(this.max);
        this.ul = this.max.querySelector('ul');//标签实例化
        this.content = this.max.querySelector('.tabscon')
        // console.log(this.ul);
        // console.log(this.content);
        this.init();
    }
    // 动态元素获取
    getitem() {
        this.lis = this.max.querySelectorAll('li');//li
        this.sections = this.max.querySelectorAll('section');//内容
        this.span = this.max.querySelectorAll('li span:nth-child(1)'); //标签内容
        this.remove = this.max.querySelectorAll('.icon-guanbi');
    }
    // 事件
    init() {
        this.getitem();
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].n = i; //获取当前元素序列号
            this.lis[i].addEventListener('click', this.togoTab.bind(this.lis[i], this))
            this.remove[i].addEventListener('click', this.removeTab.bind(this.remove[i], this))
            this.span[i].addEventListener('dblclick', this.editTab);
            this.sections[i].addEventListener('dblclick', this.editTab);
        }
        this.add.addEventListener('click', this.addTab.bind(this.add, this))
    }
    // 排他函数
    removeClass() {
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].setAttribute('class', '');
            this.sections[i].setAttribute('class', '');
        }

    }
    // 切换函数
    togoTab(box) {
        box.removeClass();
        // alert(11);
        this.setAttribute('class', 'liactive');
        box.sections[this.n].setAttribute('class', 'conactive');
    };
    // 添加函数
    addTab(box) {
        box.removeClass();
        // alert(11)
        // const li = document.createElement('li');
        // li.setAttribute('class', 'liactive');
        // box.ul.appendChild(li);
        if (box.lis.length < 7) {
            const newLi = `<li class="liactive"><span>新标签${box.lis.length + 1}</span><span class="iconfont icon-guanbi"></span></li>`;
            box.ul.insertAdjacentHTML('beforeend', newLi);
            // 生成内容
            const section = ` <section class="conactive">测试${Math.random()}</section>`
            box.content.insertAdjacentHTML('beforeend', section);
            box.init();
        } else {
            alert('把那该死的手拿开')
            box.lis[6].click()
            return
        }

    };
    // 删除函数
    removeTab(box, e) {
        // alert(11)
        e.stopPropagation();//取消冒泡
        const index = this.parentNode.n; //获取父级序列号
        box.lis[index].remove();
        box.sections[index].remove();
        box.init();
        if (document.querySelector('.liactive')) return;
        // 删除前一个选中状态
        index > 0 && index--;
        // 手动调用点击事件,没有元素则不执行
        box.lis[index] && box.lis[index].click()

    }
    // 修改函数
    editTab() {
        // alert(11)
        const str = this.innerHTML;
        this.innerHTML = `<input type="text">`;
        const input = this.children[0];
        input.value = str;
        input.select();
        input.onblur = function () {
            // 失去焦点 将值赋予文本
            input.parentNode.innerHTML = input.value;
        }
        input.onkeyup = function (e) {
            if (e.keyCode == 13) this.blur();
        }
    };
}
new Tab('#tab')